import React, { Component } from 'react';
import { Ul } from './list'
import connect from './connect'
@connect
class List extends Component {
    componentDidMount() {
        this.props.getFilmsAction()
    }
    render() {
        let { filmsList } = this.props
        return (
            <div>
                <Ul>
                    {
                        filmsList.length === 0
                        ?
                        '加载中...'
                        :
                        filmsList.map(item => (
                            <li key={item.filmId} onClick={() => {
                                if (localStorage.token) {
                                    this.props.history.push(`/detail/${item.filmId}`)
                                    this.props.addjilu(item)
                                } else {
                                    alert('您还没有登录,请先去登录')
                                    this.props.history.push('/login')
                                }
                            }}>
                                <div className="left"><img src={item.poster} alt="" /></div>
                                <div className="center">
                                    <h3>{item.name}<span>{item.filmType.name}</span></h3>
                                    <p className="ping">观众评分: {
                                        item.grade
                                            ?
                                            <span>{item.grade}</span>
                                            :
                                            '即将上映'}</p>
                                    <p className="yan">主演:{item.actors.map((item, index) => (
                                        <span key={index}>&nbsp;{item.name}</span>
                                    ))}</p>
                                    <p className="yan">{item.nation}| {item.runtime}分钟</p>
                                </div>
                                <div className="right">购票</div>
                            </li>
                        ))
                    }
                </Ul>
            </div>
        );
    }
}

export default List;
